<template>
  <CommonChart 
    class="chart-container-content"
    ref="commonChartRef"
    height="200px"
    :fullOptions="{
      options: option
    }"
    :width="`${props.width}cm`"
    :loading="false"
    :id="`${props.deviceId}-resp-chart`"
  />
</template>
<script setup lang="ts">
import CommonChart from '@/components/echarts/index.vue'
import { useLineChart } from '@/hooks/use-line-chart'
const props = defineProps({
  color: {
    type: String,
    default: 'rgb(10 210 96)'
  },
  height: {
    type: String,
    default: '100px'
  },
  width: {
    type: Number,
    default: 10
  },
  deviceId: {
    type: String,
    default: 'ZCXK001'
  },
  grid: {
    type: Object,
    default: () => {}
  }
}) as {
  color: string
  height: string
  width: number
  deviceId: string
  grid: object
}

let option = {
  color: props.color,
  tooltip: {
    show: false,
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    show: false,
    type: 'category',
    boundaryGap: false,
    axisLine: {
      onZero: false,
      color: '#666669',
      lineStyle: {
        type: 'solid',
        color: '#666669',//左边线的颜色
        width:'1'//坐标线的宽度
      }
    },
    name: '秒',
    axisLabel: {
      formatter: '{value} ',
      color: '#666669'
    },
    data: []
  },
      
  yAxis: {
    show: true,
    // name: 'mm/s',
    // nameTextStyle: {
    //   color:' #fff'
    // },
    // nameLocation: 'middle',
    min: 0,
    max: 254,
    type: 'value',
    axisLabel: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgb(63 63 68)',
        type: 'dotted'
      }
    },
    axisLine: {
      show: false
    },
    axisPointer: {
      snap: true
    }
  },
  grid: props.grid || {
    left: '0',right:'0', bottom:'0', height: '100%'
  },
  dataZoom: [{
    show: true,
    type: 'inside',
    filterMode: 'none',
    zoomOnMouseWheel: false
  }, {
    show: true,
    type: 'inside',
    filterMode: 'none',
    zoomOnMouseWheel: false
  }],
  series: [{
    name: '豪秒',
    type: 'line',
    smooth: true,
    silent: true,
    symbol: 'none',
    data: [],
    emphasis: {
      disabled: true
    },
    lineStyle: {
      width: 1
    }
  }]
};

const { commonChartRef, setOption } = useLineChart({
  type: 'resp',
  id: props.deviceId,
  totalCount: 250 * (props.width / 2.5) * 4,
  initNum: null,
  totalPreSecond: 250,
  onceUpdate: 25,
  timeOut: 100,
  emptyNum: 10
})
defineExpose({
  setOption
})
</script>
